<!--  -->
<template>
    <div class="odc-ui-custom-dialog-box"
        :class="!isShowFooter && !isShowCustomFooter ? 'odc-ui-dialog-body-nobottompadding' : ''">
        <el-dialog :class="showWarnTip ? 'warn-ba-operate-dialog' : 'ba-operate-dialog'" v-model="dialogVisible" :title="title"
            :width="width ? width : showWarnTip ? '420' : '680'" :append-to-body="appendToBody" :before-close="cancel"
            :close-on-click-modal="closeOnClickModal" :destroy-on-close="destroyOnClose" @closed="closedClick"
            @open="openClick">
            <template #header v-if="title">
                <div v-if='title' class="ba-operate-dialog-title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
                    {{ title }}
                </div>
                <!--展示系统消息title-->
                <div v-if='showWarnTip' class="ba-operate-dialog-title"
                    v-drag="['.warn-ba-operate-dialog', '.el-dialog__header']">
                    {{ t('common.systemTip') }}
                </div>
            </template>
            <!-- 弹窗中间body -->
            <el-scrollbar class="ba-table-form-scrollbar" v-if="showBodyScrollbar" :height="scrollbarHeight">
                <div class="ba-operate-dialog-main">
                    <!--系统消息icon和内容-->
                    <div class="flex">
                        <el-icon class="ba-operate-dialog-warn-icon" v-if="showWarnTip">
                            <WarningFilled />
                        </el-icon>
                        <p class="main-content" v-if="content" v-html="content"></p>
                    </div>
                    <p class="sub-content" v-if="subcontent" v-html="subcontent"></p>
                    <slot></slot>
                </div>
            </el-scrollbar>
            <!--是否需要超高度滚动-->
            <div class="ba-operate-dialog-main" v-if="!showBodyScrollbar">
                <div class="main-content-box">
                    <el-icon class="ba-operate-dialog-warn-icon" v-if="showWarnTip">
                        <WarningFilled />
                    </el-icon>
                    <p class="main-content ml6" v-if="content" v-html="content"></p>
                </div>
                <p class="sub-content" v-if="subcontent" v-html="subcontent"></p>
                <slot></slot>
            </div>
            <!-- 弹窗底部 -->
            <template v-if="isShowFooter" #footer>
                <div class="dialog-footer" v-if="isShowFooter">
                    <el-button @click="cancel">{{ cancelText ? cancelText : t('common.cancel') }}</el-button>
                    <el-button type="primary" @click="confirm">{{ confirmText ? confirmText : t('common.confirm') }}</el-button>
                </div>
                <slot name="customFooter" v-if="isShowCustomFooter"></slot>
            </template>
        </el-dialog>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
    // import引入的组件需要注入到对象中才能使用
    props: {
        // 是否显示弹框
        visible:{
            type: Boolean,
            required:true
        },
         // 弹框标题
        title:{
            type: String,
            required:true
        },
        // 是否显示底部按钮
        isShowFooter:{
            type: Boolean,
            required:false
        },
        // 点击确定按钮回调
        confirmCb:{
            type: Function,
            required:false
        },
         // 关闭弹框回调
        closedClickCb:{
            type: Function,
            required:false
        },
        openedClickCb:{
            type: Function,
            required:false
        },       
        // 点击取消按钮回调
        cancelCb:{
            type: Function,
            required:false
        },
        confirmText:{
            type: String,
            required:false,
            default: ''
        },
        cancelText:{
            type: String,
            required:false,
            default: ''
        },
        // 弹框宽度
        width:{
            type: String|Number,
            required:false,
            default: ''
        },
       // 滚动条高度
        scrollbarHeight:{
            type:String |Number,
            required:false,
            default: '420'
        },
        // 是否将自身插入至 body 元素，有嵌套的弹窗时一定要设置
        appendToBody:{
            type:Boolean,
            required:false
        },
        content:{// 主要内容
            type:String,
            required:false
        },
        subcontent:{// 次要内容 （灰色字体）
            type:String,
            required:false
        },
        showWarnTip:{// 警告icon
            type:Boolean,
            required:false
        },
        showBodyScrollbar:{// 是否body 超高度滚动，默认滚动
            type:Boolean,
            required:false,
            default:true
        },
        closeOnClickModal:{
            type:Boolean,
            required:false
        },
        destroyOnClose:{ // 关闭时销毁 Dialog 中的元素
            type:Boolean,
            required:false
        },
        isShowCustomFooter:{
            type:Boolean,
            required:false
        },
        fullscreen:{// 是否全屏展示弹窗
            type:Boolean,
            required:false
        }
    },
  components: {},
    data() {
        // 这里存放数据
        const dialogVisible = this.visible
        return {    
            dialogVisible:dialogVisible
        }
    },
    // 监听属性 类似于data概念
    watch: {
        visible(val) {
            this.dialogVisible = val
        }
    },
    // 方法集合
    methods: {
        cancel(){
            this.$emit('update:visible',false)
            this.$emit('cancelCb')
        },
        confirm(){
            this.$emit('confirmCb')
        },
        closedClick(){
            this.$emit('closedClickCb') 
        },
        openClick(){
            this.$emit('openedClickCb')
        }
        
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
}
</script>
<style lang="scss" scoped>
 .odc-ui-custom-dialog-box {
    .main-content-box {
      display: flex;
      align-items: center;
      .main-content {
        color: var(--color-3d);
        text-align: center;
        margin: 0;
        .sub-content {
          color: var(--color-9c);
          font-size: 12px;
          margin-top: 4px;
        }
      }
    }
    /* 新增/编辑表单*/
    :deep(.el-overlay-dialog){
      /*overflow: hidden;*/
      height: 100vh;
    }
    :deep(.ba-operate-dialog)  {
      overflow: hidden;
      padding:0;
      border-radius: var(--el-border-radius-base);
      .ba-operate-dialog-title {
        font-size: 14px;
      }
      .el-dialog__header {
        padding: 16px 32px 16px 16px;
        border-bottom: 1px solid #f5f5f5;
      }
      .el-dialog__body {
        /*max-height: 60vh;*/
        padding-top: 0;
        padding-bottom: 52px;
        padding-left: 16px;
        padding-right: 16px;
      }
      .el-dialog__footer {
        padding: 10px var(--el-dialog-padding-primary);
        box-shadow: var(--el-box-shadow);
        position: absolute;
        width: 100%;
        bottom: 0;
        background: #fff;
        z-index: 3;
      }
      .ba-operate-dialog-main {
        padding-top: 20px;
        padding-bottom: 20px;
      
      }
    }
    /*easyDialog是系统提示删除弹窗*/
    :deep(.warn-ba-operate-dialog) {
        overflow: hidden;
      padding: 0;
      .el-dialog__header {

        padding: 16px 32px 16px 16px;
      }
      .ba-operate-dialog-warn-icon {
        font-size: 20px !important;
        color:#e6a23c !important;
        margin-right: 4px;
      }
      .ml6 {
        margin-left: 6px;
      }
      .ba-operate-dialog-title {
        font-size: 14px;
      }
      .el-dialog__body {
        padding-top: 0;
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 52px;
      }
      .el-dialog__footer {
        padding: 16px var(--el-dialog-padding-primary);
        position: absolute;
        width: 100%;
        bottom: 0;
        background: #fff;
        z-index: 3;
      }
      .ba-operate-dialog-main {
        padding-top: 10px;
        padding-bottom: 16px;
      
      }
    }
  }
  .odc-ui-dialog-body-nobottompadding {
    :deep(.ba-operate-dialog ){
      .el-dialog__body {
        padding-bottom: 0;
      }
    }
    :deep(.warn-ba-operate-dialog ){
      .el-dialog__body {
        padding-bottom: 0;
      }
    }
  }
</style>